<template>
	<view style="font-size: 30rpx;">
		<view class="order_itemBox" v-for="item in winnerList" :key="item.id" @click="orderDetails(item)">
			<view class="order_itemDetail">
				<view>
					<text style="font-size: 24rpx;">订单编号：</text>
					<text class="order_num" style="font-size: 24rpx;">{{item.orderNo}}</text>
				</view>
				<view> 
					<text style="font-size: 24rpx;">{{item.redeemTime}}</text>
				</view>
			</view>
			<view class="goods-order-title">
				<view class="title-goods">商品详情</view> 
				<view  v-if="addressList.length!=0">
					<view class="winStatus">
						{{ winStatusFormat(item) }} </view>
				</view>
				<view class="payOrder" v-else>待完善地址</view> 
			</view>

			<view class="order_container_Details">
				<view class="container_Details">
					<view class="container_Pics">
						<image :src="item.product.imgurl" class="pics"></image>
					</view>
				</view>
				<view class="right_container">
					<view class="pics-box">
						<view class="title">{{item.name}}</view>
					</view>
					<view class="container_status">
						<view class="moneyStyle">{{item.product.integral}}</view>
						<view class="numStyle">{{item.exchangeCount}}</view>
						<view class="toPay"> 
							<view class="cancleOrder" v-if="addressList.length ===0" @click.stop="addressComplete">立即完善
							</view> 
							<view class="payOrder" v-if="item.recipientPhone===''" @click.stop=" redeemNow(item)">立即兑换
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="order_TOpay">
				<view>订单总积分：</view>
				<view class="result_pay">{{item.totalPrice}}</view>
			</view>
		</view>
		<view v-if='winnerList.length==0' class="winnerListNull"> 暂无数据！</view>
	</view>
</template>

<script>
	import {
		getAddressList
	} from '@/utils/utils.js';
	import request from '@/utils/request.js';
	export default {
		name: 'myredeem',
		props: ['currentNum'],
		data() {
			return {
				winnerList: [],
				formData: {
					lucky: 1,
					size: 10,
					current: 1
				},
				total: '',
				addressList: []
			};
		},
		created() {
			this.getOrderList()
			this.MemberAddressList()
		},
		watch: {
			currentNum(newVal) {
				this.getOrderList(); // 当currentNum变化时重新调用方法
			}
		},
		methods: {
			getOrderList() {
				request.post("/redeemRecord/page", this.formData).then(res => {
					if (res.code === 0) {
						this.winnerList = this.winnerList.concat(res.data || []);
						this.total = res.total;
						this.exchangetotal();
					} else {
						uni.$showMsg(res.msg)
					}
				});
			},
			// 传值
			exchangetotal() {
				this.$emit('exchangetotal', this.total)
			},

			// 获取会员信息
			async MemberAddressList() {
				this.addressList = await getAddressList();
			},
			// 订单详情页
			orderDetails(item) {
				uni.navigateTo({
					url: '/subpkg/orderDetails/orderDetails?id=' + item.id
				})
			},

			// 完善地址
			addressComplete() {
				uni.navigateTo({
					url: '/subpkg/addressList/addressList'
				})
			},
			// 立即兑换
			redeemNow(item) {
				uni.navigateTo({
					url: '/subpkg/goods_order/goods_order?orderInfo=' + JSON.stringify(item)
				})
			},
			winStatusFormat(item) {
				if (item.redeemStatus == 1) {
					return "已取消"
				} 
				switch (item.deliveryStatus) {
					case 0:
					return "待发货"
					case 1:
					return "待收货"
					case 2:
					return "待支付"
					case 3:
					return "已收货"
				}
			},
		}
	}
</script>

<style lang="scss">
	.winnerListNull {
		line-height: 150rpx;
		text-align: center;
	}

	.order_itemBox {
		margin-top: 10px;
		border: 1px solid #eeeeee;

		.order_itemDetail {
			display: flex;
			justify-content: space-between;
			padding: 10px;
			background-color: white;
			border-bottom: 1px solid #eeeeee;
			color: #868181;

			.order_num {
				color: deepskyblue;
			}
		}

		.goods-order-title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: white;
			padding: 10px;
			border-bottom: 1px solid #eeeeee;

			.payOrder {
				margin: 10rpx 0;
				color: #ff5555;
			}

			.title-goods {
				font-size: 30rpx;
				font-weight: 400;
				color: #868181;
			}

			.winStatus {
				margin-right: 30rpx;
				color: #ff5555;
			}
		}

		.order_container_Details {
			padding: 10px;
			border-bottom: 1px solid #eeeeee;
			display: flex;
			background-color: white;

			.container_Details {
				display: flex;

				.container_Pics {
					display: flex;

					.pics {
						width: 120rpx;
						margin: 10rpx;
						height: 120rpx;
					}

				}
			}

			.right_container {
				flex: 1;
				display: flex;
				flex-direction: column;
				margin-top: 20rpx;

				.container_status {
					display: flex;
					flex: 1;
					justify-content: space-around;
					align-items: center;
					margin: 0rpx 10rpx 0rpx 20rpx;

					.moneyStyle {
						color: #ff5555;
					}

					.numStyle {}

					.toPay {
						display: flex;
						flex-direction: column;

						.payOrder {
							margin: 10rpx 0;
							color: blue;
						}
					}

					.cancleOrder {
						color: orange;
					}
				}
			}
		}

		.order_TOpay {
			display: flex;
			justify-content: flex-end;
			padding: 10rpx 20rpx;
			line-height: 40rpx;
			background-color: #fff;

			.result_pay {
				color: red;
				font-size: 24rpx;
				font-weight: 600;
			}
		}
	}
</style>